<template>
	<view>
		<!-- 搜索框 -->
		<view class="bg-white pl-10 pr-10 pt-30 pb-30">
			<view class="box-search">
				<view class="ml-20">
					<text class="iconfont icon-sousuo"></text>
				</view>
				<view class="ml-10 flex ac sb" style="width: 100%;">
					<view>
						<input style="width: 60vw" type="text" v-model="form.search" placeholder-class="input-search"
							placeholder="搜索城市" />
					</view>
					<view @click="searchClickList" class="searchBtn mr-20">
						搜索
					</view>
				</view>
			</view>
		</view>
		<!-- end -->

		<!-- 内容区域 -->
		<view class="box-content">
			<view class="box-left">
				<scroll-view :scroll-into-view='scrollIntoView' scroll-with-animation scroll-y class="w-100p h-100p">
					<view :id="'city'+index" v-for="(item,index) in list" :key="item.id" @click="selectNav(item,index)"
						class="box-city " :class="{ 'box-city-active': current == index  }">
						<view v-if="current == index" class="box-city-line"></view>
						<view class="w-100p line-1">
							{{item.name || ''}}
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="box-right">
				<scroll-view scroll-y class="w-100p h-100p">
					<view>
						<text class="iconfont-yjgs ">&#xe6ed;</text>
						<text class="ml-10 fw fs-28">当前选择城市：{{currentAddr.name || ''}}</text>
					</view>
					<view class="mt-20">
						<image class="br-12" :src="$timer.ensureUrl(cityList.province_img)"
							style="height: 160rpx;width: 100%;" mode="aspectFill"></image>
					</view>
					<view class="mt-20 flex ac">
						<view class="box-line-title"> </view>
						<view class="fw ml-10">
							{{cityList.name || ''}}城市
						</view>
					</view>
					<view class="mt-10 box-city-ww">
						<view @click="selectAddr(item)" v-for="(item,index) in cityList.children" :key="item.id">
							<view class="pos-r" style="height: 160rpx;width: 160rpx;">
								<image :src="$timer.ensureUrl(item.cover_img)" class="w-100p h-100p br-12 shadow-2"
									mode="aspectFill"></image>
								<view v-if="item.is_open == 2" class="box-card-not">暂未开通</view>
							</view>
							<view class="line-1 w-100p">
								<text class="fs-24 ">{{item.name || ''}}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- end -->

		<!-- 弹窗 -->
		<uni-popup ref="createPopupRef" type="center">
			<view class="exchangePopupRef">
				<image class="mt-50" style="height: 380rpx;width: 100%;"
					src="https://yjgs.jsonbug.com/storage/default/20241104/tcbjt.png"></image>
				<view class="tc ml-20 mr-20">
					<view class="fw fs-30">
						<text>该城市正在招募服务中心，暂未开通店铺</text>
					</view>
					<view class="mt-10">
						<text class="c-999 fs-28">
							了解招募详情,请前往“遇见贵商 城市服务中心招募计划”进行查看
						</text>
					</view>
					<view @click="toPage('立即前往')" class="box-topage">
						<text>立即前往</text>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- end -->


	</view>
</template>

<script>
	import {
		addressTwoLevel,
	} from '@/api/extend.js'
	export default {
		data() {
			return {
				list: [],
				cityList: {},
				current: 0,
				scrollIntoView: '',
				form: {
					search: ''
				}
			}
		},
		created() {
			this.getAddressTwoLevelFunc();
		},
		computed: {
			currentAddr() {
				return this.$store.state.extend.currentAddr
			}
		},
		methods: {
			toPage(tag) {
				if (tag == '立即前往') {
					uni.navigateTo({
						url: '/pages/extend/project_model/index_desc?project_id=1'
					})
				}
			},
			selectAddr(item) {
				if (item.is_open == 2) {
					this.$refs.createPopupRef.open();
				} else {
					this.$store.commit('SET_currentAddr', {
						name: item.name,
						id: item.id,
						type: item.type,
						isShow: true,
					});
					uni.$emit('addreChangeReferList')
					uni.navigateBack();
				}
			},
			getAddressTwoLevelFunc() {
				addressTwoLevel().then(res => {
					this.list = res.data || [];
					if (this.list.length > 0) {
						this.cityList = this.list[0];
					}
				})
			},
			searchClickList() {
				if (!this.form.search) {
					uni.showToast({
						title: '请输入搜索城市！'
					})
					return
				}
				let index = -1;
				this.list.forEach((item, _i) => {
					if (item.name.includes(this.form.search)) {
						index = _i
					} else {
						if (item.children.length) {
							item.children.forEach((obj, _index) => {
								if (obj.name.includes(this.form.search)) {
									index = _i;
								}
							})
						}
					}
				})

				if (index != -1) {
					this.current = index;
					this.cityList = this.list[index];
					this.scrollIntoView = `city${index}`
				} else {
					uni.showToast({
						title: '未找到该城市',
						icon: 'none'
					})
				}

			},
			selectNav(item, index) {
				this.current = index;
				this.cityList = item;
			}
		}
	}
</script>

<style scoped lang="scss">
	.box-topage:active {
		opacity: .5;
	}

	.box-topage {
		margin-top: 60rpx;
		margin-left: auto;
		margin-right: auto;
		height: 70rpx;
		border-radius: 12rpx;
		background-color: #D0AF70;
		line-height: 70rpx;
		text-align: center;
		color: white;
	}

	.exchangePopupRef {
		padding: 12rpx;
		width: 80vw;
		height: 52vh;
		background-color: #FFFFFF;
		border-radius: 12rpx;
	}

	.box-card-not {
		top: -8rpx;
		right: -20rpx;
		width: fit-content;
		box-sizing: border-box;
		padding-left: 15rpx;
		padding-right: 15rpx;
		padding-top: 6rpx;
		padding-bottom: 8rpx;
		border-radius: 0px 20rpx 0px 20rpx;
		text-align: center;
		position: absolute;
		font-size: 24rpx;
		background-color: #B28F4E;
		color: white;
		transform: scale(.7);

	}

	.box-city-ww {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 20rpx;
	}

	.box-line-title {
		width: 6rpx;
		height: 40rpx;
		background-color: #D0AF70;
	}

	.box-city-line {
		height: 100%;
		width: 8rpx;
		background-color: #D0AF70;
	}

	.box-city-active {
		color: #D0AF70;
		font-weight: bold;
		background-color: #FFFFFF;
	}

	.box-city {
		display: flex;
		align-items: center;
		line-height: 90rpx;
		font-weight: bold;
		box-sizing: border-box;
		text-align: center;
		width: 100%;
		height: 90rpx;
	}

	.box-right {
		flex: 1;
		height: 88vh;
		box-sizing: border-box;
		padding: 20rpx;
		background-color: #FFFFFF;
	}

	.box-left {
		min-width: 180rpx;
		height: 88vh;
		background-color: #F4F5F9;
	}

	.box-content {
		padding-top: 20rpx;
		display: flex;
		align-items: center;
		background-color: #F5F5F5;
	}

	.searchBtn {
		width: 100rpx;
		height: 50rpx;
		background-color: #D0AF70;
		color: white;
		text-align: center;
		font-size: 26rpx;
		line-height: 50rpx;
		border-radius: 60rpx;
	}

	.input-search {
		color: #BBBBBB;
		font-size: 30rpx;
	}

	.box-search {
		margin-left: auto;
		margin-right: auto;
		display: flex;
		align-items: center;
		border-radius: 50px;
		background-color: #F4F5F9;
		width: 90%;
		height: 80rpx;
	}
</style>